<script>
import { login } from '@/api/user'
import { useUserStore } from '@/store/user'
import { ref } from 'vue'

export default {
  setup() {
    const userStore = useUserStore()
    const form = ref(null)

    const formData = ref({
      username: '',
      password: '',
    })

    const rules = {
      username: {
        rules: [
          { required: true, errorMessage: '请输入账号' },
        ],
      },
      password: {
        rules: [
          { required: true, errorMessage: '请输入密码' },
        ],
      },
    }

    const handleLogin = async () => {
      try {
        const valid = await form.value.validate()
        if (!valid)
          return

        const res = await login(formData.value)
        userStore.setToken(res.access_token)
        userStore.setUserInfo(res.user)

        uni.showToast({
          title: '登录成功',
          icon: 'success',
        })

        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index',
          })
        }, 1500)
      }
      catch (error) {
        console.error('登录失败:', error)
      }
    }

    const goToRegister = () => {
      uni.navigateTo({
        url: '/pages/register/index',
      })
    }

    const goToForgotPassword = () => {
      uni.navigateTo({
        url: '/pages/forgot-password/index',
      })
    }

    const handleWechatLogin = () => {
      uni.showToast({
        title: '微信登录功能开发中',
        icon: 'none',
      })
    }

    const handleQQLogin = () => {
      uni.showToast({
        title: 'QQ登录功能开发中',
        icon: 'none',
      })
    }

    return {
      form,
      formData,
      rules,
      handleLogin,
      goToRegister,
      goToForgotPassword,
      handleWechatLogin,
      handleQQLogin,
    }
  },
}
</script>

<template>
  <view class="login-container">
    <view class="login-header">
      <image class="logo" src="/static/logo.svg" mode="aspectFit" />
      <text class="title">
        图书共享平台
      </text>
    </view>

    <view class="login-form">
      <uni-forms ref="form" :model-value="formData" :rules="rules">
        <uni-forms-item name="username">
          <uni-easyinput
            v-model="formData.username"
            placeholder="请输入邮箱/手机号"
          />
        </uni-forms-item>

        <uni-forms-item name="password">
          <uni-easyinput
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
          />
        </uni-forms-item>
      </uni-forms>

      <!-- <view class="forgot-password" @click="goToForgotPassword">
        忘记密码？
      </view> -->

      <button class="login-btn" type="primary" @click="handleLogin">
        登录
      </button>

      <view class="register-link" @click="goToRegister">
        还没有账号？立即注册
      </view>

      <view class="third-party-login">
        <view class="divider">
          <text class="divider-text">
            第三方登录
          </text>
        </view>

        <view class="third-party-btns">
          <view class="third-party-btn wechat" @click="handleWechatLogin">
            <uni-icons type="weixin" size="30" color="#fff" />
          </view>

          <view class="third-party-btn qq" @click="handleQQLogin">
            <uni-icons type="qq" size="30" color="#fff" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-container {
  padding: 40rpx;

  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;

    .logo {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 20rpx;
    }

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .login-form {
    .forgot-password {
      text-align: right;
      font-size: 28rpx;
      color: #666;
      margin: 20rpx 0;
    }

    .login-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      margin: 40rpx 0;
      background-color: #007AFF;
      border-radius: 44rpx;
    }

    .register-link {
      text-align: center;
      font-size: 28rpx;
      color: #007AFF;
      margin-bottom: 60rpx;
    }

    .third-party-login {
      .divider {
        position: relative;
        text-align: center;
        margin: 40rpx 0;

        &::before,
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          width: 30%;
          height: 1px;
          background-color: #ddd;
        }

        &::before {
          left: 0;
        }

        &::after {
          right: 0;
        }

        .divider-text {
          display: inline-block;
          padding: 0 20rpx;
          font-size: 28rpx;
          color: #999;
          background-color: #fff;
        }
      }

      .third-party-btns {
        display: flex;
        justify-content: center;
        gap: 60rpx;

        .third-party-btn {
          width: 88rpx;
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;

          &.wechat {
            background-color: #07C160;
          }

          &.qq {
            background-color: #12B7F5;
          }
        }
      }
    }
  }
}
</style>
